<script setup>
import {Image,Button,Popup, Toast} from 'vant';
import {ref} from 'vue';
import http from '@/http';
import router from '@/router';
const show = ref(false);
const showBottom = ref(false);
const userTextarea = ref('')
const listA = ref([])
const selectList = ref([])
const systemCurxList = ref([])
const cusIndex = ref(0) //list的索引
const storeId = ref(JSON.parse(localStorage.getItem('shop')).shopDescription)
/**
 * 打开自定义关键字弹窗
 *
 * @param i 光标位置索引
 * @returns 无返回值
 */
const addCusCurx = (i) => {
    show.value = true
    cusIndex.value = i
    userTextarea.value = ''
}
/**
 * 打开系统关键字弹窗
 *
 * @param i 当前索引值
 * @returns 无返回值
 */
const addSystemCurx = (i) => {
    showBottom.value = true
    cusIndex.value = i
}

const getSystemCurx = async() => {
    const res = await http.post('/selectBDGJZ')
    systemCurxList.value = res.data
}

const getCustemCurx = async() => {
    const res = await http.get(`/selectGJZByStoreId/${storeId.value}`)
    selectList.value.push(...res.data)
}
// getCustemCurx()
getSystemCurx()

const filter = () => {
    if(!selectList.value.length)return Toast('请选择关键词')
    router.back()
    localStorage.setItem('curx',JSON.stringify(selectList.value))
}

/**
 * 自定义关键字取消
 *
 * @returns 无返回值
 */
const cencel = () => {
    show.value = false
}

const verify = async() => {
    // const res = await http.post('/saveGJZ',{
    //     gjz:userTextarea.value,
    //     gjzState:1,
    //     storeId:storeId.value
    // })
    // Toast('添加成功')
    selectList.value.push({
        gjz:userTextarea.value,
        gjzState:1,
        storeId:storeId.value
    })
    show.value = false
    userTextarea.value = ''
}

const chooseSystemCurx = (e) => {
    if(selectList.value.includes(e)){
        selectList.value = selectList.value.filter(item => item !== e)
    }else{
        selectList.value.push(e)
    }
}

const delCurx = (i) => {
    selectList.value = selectList.value.filter((item,index) => index !== i)
}
</script>

<template>
    <div class="page">
        <div class="top-title">过滤设置</div>
        <div class="top-text">将只保留含有以下关键词的线索信息</div>
        <div class="content">
            <div class="choose-keyword">
                <div class="curx-tag" @click="addSystemCurx(index)">
                    <Image class="curx-tag-image" :src="require('../../assets/img/home_icon_jhaoh.png')"/>
                    <span>系统关键字</span>
                </div>
                <div class="curx-tag-cus" @click="addCusCurx(index)">
                    <Image class="curx-tag-cus-image" :src="require('../../assets/img/home_icon_jhaol.png')"/>
                    <span>自定义关键字</span>
                </div>
            </div>
            <div class="content-curx">
                <div class="curx-items" v-for="item,index in selectList" :key="index">
                    <li>
                        <div class="curx-item">
                            <span>{{item.gjz}}</span>
                            <Image class="curx-item-image" @click="delCurx(index)" :src="require('../../assets/img/home_icon_gbi.png')"/>
                        </div>
                    </li>
                </div>
            </div>
        </div>
        <div class="btn-box">
            <Button class="btn-ver" @click="filter">确定</Button>
            <div class="btn-bottom"></div>
        </div>
         <Popup
        v-model:show="showBottom"
        round
        closeable
        close-icon="cross"
        position="bottom"
        >
        <div class="popup">
            <div class="popup-top">
                系统关键字
            </div>
            <div class="popup-content">
                <div 
                v-for="item,index in systemCurxList" 
                :key="index" 
                :class="selectList.includes(item) ? 'popup-item-active' : 'popup-item'" 
                @click="chooseSystemCurx(item)"
                class="popup-item">{{item.gjz}}</div>
            </div>
            <div class="popup-bottom">
                <Button class="btn-choose" @click="showBottom = !showBottom">确定选择</Button>
            </div>
        </div>
    </Popup>
    <Popup 
        v-model:show="show" 
        round
        position="center">
          <div>
            <textarea v-model="userTextarea" class="dialog-textarea" placeholder="输入关键字"></textarea>
            <div class="popup-content-bottom">
                <div class="cencel" @click="cencel">取消</div>
                <div class="verify" @click="verify">确认</div>
            </div>
          </div>
        </Popup>
    </div>
</template>

<style>
    .page{
        padding: 4vw 3vw;
        box-sizing: border-box;
        background-color: rgb(245,247,250);
    }
    .top-title{
        font-size: 4.27vw;
        color: rgb(48,49,51);
        margin-bottom: 2vw;
    }
    .top-text{
        font-size: 3.73vw;
        color: rgb(255,66,66);
        margin-bottom: 3vw;
    }
    .curx-tag{
    width: 34vw;
    height: 9vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2vw 0 3vw;
    background-color: rgba(230,162,60,0.1);
    color: rgb(230,162,60);
    font-size: 3.73vw;
    border-radius: 48.53vw;
    }
    .curx-tag-image{
        width: 6vw;
        height: 6vw;
    }
    .curx-tag-cus{
        width: 34vw;
        height: 9vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(64,158,255,0.1);
        color: rgb(64,158,255);
        font-size: 3.73vw;
        border-radius: 48.53vw;
    }
    .curx-tag-cus-image{
        width: 6vw;
        height: 6vw;
    }
    .choose-keyword{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .content{
        background-color: #fff;
        border-radius: 1.6vw;
        padding: 5vw 6vw;
    }
    .curx-items li{
    display: inline-block;
    }
    /* .curx-items{
        margin: 4vw 0;
    } */
    .curx-item{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 7.47vw;
        font-size: 3.73vw;
        color: rgb(48,49,51);
        border-radius: 29.33vw;
        background-color: rgb(245,247,250);
        padding: 1vw 2vw;
        box-sizing: border-box;
        margin: 0 4vw 4vw 0;
    }
    .curx-item:nth-child(3n){
        margin: 0;
    }
    .curx-item-image{
        display: inline-block;
        width: 6vw;
        height: 6vw;
    }
    .content-curx{
        margin-top: 4vw;
        display: flex;
        flex-wrap: wrap;
    }
    .btn-box{
        position: fixed;
        bottom: 0;
        
    }
    .btn-ver{
        width: 91vw;
        height: 12vw;
        border-radius: 26.67vw;
        background-color: rgb(64,158,255);
        text-align: center;
        line-height: 12vw;
        color: #fff;
    }
    .btn-bottom{
        width: 100%;
        height: 9vw;
    }
    .popup{
    position: relative;
    width: 100%;
    height: 160vw;
    }
    .popup-top{
        width: 100%;
        height: 15vw;
        text-align: center;
        line-height: 15vw;
        font-size: 4.27vw;
        font-weight: 500;
        border-bottom: 1px solid rgb(220,223,230);
    }
    .popup-content{
        padding: 4vw;
        box-sizing: border-box;
    }
    .popup-item{
        display: inline-block;
        padding: 1.33vw 4.27vw;
        background-color: rgb(245,247,250);
        margin: 0 3vw 3vw 0;
        border: 1px solid transparent;
        border-radius: 27.2vw;
    }
    .popup-bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        width: 100%;
        height: 22vw;
        background-color: #fff;
        padding-top: 1vw;
    }
    .btn-choose{
        width: 91vw;
        height: 12vw;
        background-color: rgb(64,158,255);
        color: #fff;
        font-size: 4.27vw;
        border-radius: 26.67vw;
    }
    .popup-item-active{
        background-color: rgba(64,158,255,0.1) !important;
        color: rgb(64,158,255) !important;
        border: 1px solid rgb(64,158,255) !important;
    }
    .dialog-textarea{
        width: 71vw;
        height: 25vw;
        border-radius: 1vw;
        margin: 4vw;
        background-color: rgb(245,247,250);
        padding: 3vw 4vw;
        font-size: 4.27vw;
        border: none;
    }
    .popup-content-bottom{
        display: flex;
        width: 100%;
        height: 15vw;
        border-top: 1px solid rgb(235,238,245);
    }
    .cencel{
        flex: 1;
        text-align: center;
        height: 100%;
        line-height: 15vw;
        color: rgb(144,147,153);
        font-size: 4.53vw;
    }
    .verify{
        flex: 1;
        text-align: center;
        height: 100%;
        line-height: 15vw;
        color: rgb(64,158,255);
        font-size: 4.53vw;
        border-left: 1px solid rgb(235,238,245);
    }
</style>